<template>
<div class="adoptCouponItemList">
  <search-block type="flex">
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
      <el-popover
        v-model="statVisible"
        placement="bottom"
        trigger="click">
        <el-button slot="reference" @click="getStat">统计</el-button>
        <div>
          <el-descriptions direction="vertical" :column="3" border v-if="statData">
            <el-descriptions-item
              v-for="({label, value}) in semAdoptForStatOptions"
              :key="value"
              :label-class-name="statusClassForStat(value)"
              :label="label">{{statData[value] || 0}}</el-descriptions-item>
          </el-descriptions>
          <el-skeleton animated style="width:231px" v-else>
            <template slot="template">
              <el-skeleton-item variant="rect" style="width:231px;height:90px"/>
              <el-skeleton-item variant="rect" style="width:231px;height:90px"/>
            </template>
          </el-skeleton>
        </div>
      </el-popover>
    </template>
    <el-form inline :model="model">
      <el-form-item label="券编码:">
        <el-input v-model="model.cardCode" clearable></el-input>
      </el-form-item>
      <el-form-item label="是否可用:">
        <el-select v-model="model.status" clearable>
          <el-option label="可用" :value="1"></el-option>
          <el-option label="不可用" :value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    :pagination='{
      total: 0,
      currentPage:1,
      pageSize: 5,
      position: "right",
      pageSizes: [5, 10, 30, 50],
      layout: "sizes,total,prev, pager, next,jumper"
    }'
    :immediate="false"
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="bindStatus" label="绑定状态" align="center" header-align="center" min-width="240">
      <template v-slot="{row}">
        <span :class="statusClass(row.bindStatus)">{{row.bindStatus === '0' ? '未绑定' : '已绑定'}}</span>
        <span v-if="row.bindOwnerTime">[{{ row.bindOwnerTime.replace('T', ' ') }}]</span>
      </template>
    </el-table-column>
    <el-table-column slot="usageTime" label="使用状态" align="center" header-align="center" min-width="240">
      <template v-slot="{row}">
        <span :class="statusClass(!row.usageTime ? '0' : '1')">{{!row.usageTime ? '未使用' : '已使用'}}</span>
        <span v-if="row.usageTime">[{{ row.usageTime.replace('T', ' ') }}]</span>
      </template>
    </el-table-column>
    <el-table-column slot="status" label="是否可用" align="center" header-align="center" width="100">
      <template v-slot="{row}">
        <el-popconfirm
          v-if="row.bindStatus === '0'"
          :title="row.status === 1 ? `是否确认禁用？` : `是否确认启用？`"
          @confirm="doEnable(row.id, row.status)">
          <el-switch
            disabled
            slot="reference"
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"></el-switch>
        </el-popconfirm>
        <el-switch
          v-else
          disabled
          v-model="row.status"
          :active-value="1"
          :inactive-value="0"></el-switch>
      </template>
    </el-table-column>
<!--    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="100">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-popconfirm
              title="是否确认删除该券？"
              @confirm="delCoupon(row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>-->
  </y-table>
</div>
</template>

<script>
export default {
  name: "adoptCouponItemList",
  inject: ['getBatchParam', 'getEnum'],
  computed: {
    getDataWay() {
      return {
        dataType: 'url',
        data: this.$api.sem.adoptCouponList,
        param: Object.assign(this.getBatchParam(), this.model)
      }
    },
  },
  data(){
    return{
      statVisible: false,
      statData: null,
      semAdoptForStatOptions: this.getEnum('semAdoptForStat'),
      model:{
        cardCode: '',
        status: ''
      },
      columns: [
        {
          label: "券编码",
          prop: "cardCode",
          minWidth: 130
        },
        {
          prop: "bindStatus",
          template: true,
        },
        {
          prop: 'usageTime',
          template: true
        },
        /*{
          label: "券密码",
          prop: "cardSecret",
          minWidth: 150
        },*/
        {
          label: "是否可用",
          prop: "status",
          template: true
        }
      ],
    }
  },
  methods:{
    search(jumpToFirst){
      this.$refs['table'] && this.$refs['table'].loadData(Object.assign(this.getBatchParam(), this.model), jumpToFirst);
    },
    delCoupon(row){
      //TODO 该接口已删除
      /*this.$yAxios({
        url: this.$api.sem.removeAdoptCoupon,
        data:{
          ids: [row.id]
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
      })*/
    },
    doEnable(id, status){
      this.$yAxios({
        url: this.$api.sem.semAdoptStatus,
        data:{
          id, status: status^1
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: status === 0 ? '启用成功' : '禁用成功'
        });
        this.search();
      })
    },
    statusClassForStat(status){
      switch(status){
        case 'nobind': return 'y-success';
        case 'bind': return 'y-warning';
        case 'use': return 'y-primary';
        case 'deadline': return 'y-info';
        case 'disabled': return 'y-danger';
      }
      return ''
    },
    getStat(){
      this.$yAxios({
        url: this.$api.sem.semAdoptStatistics,
        data: this.getBatchParam()
      }, info => {
        this.$set(this, 'statData', info);
      })
    },
    statusClass(status){
      switch(status){
        case '0': return 'y-success';
        case '1': return 'y-primary';
      }
      return ''
    }
  }
}
</script>

<style scoped>

</style>